<template>
  <div class="relative max-w-7xl mx-auto px-4 py-8">
    <!-- 左右滑动按钮 -->
    <button
      @click="scroll('left')"
      class="absolute left-0 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full shadow-lg z-10"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
    </button>

    <!-- 图片容器 -->
    <div ref="container" class="flex gap-4 overflow-x-hidden scroll-smooth">
      <a
        v-for="(item, index) in products"
        :key="index"
        :href="item.link"
        class="min-w-[calc(25%-12px)] relative group"
      >
        <img
          :src="item.image"
          :alt="item.title"
          class="w-full h-64 object-cover rounded-lg transition-transform duration-300 group-hover:scale-105"
        />
        <div class="absolute bottom-0 left-0 right-0 bg-black/50 text-white p-2 rounded-b-lg">
          <h3 class="text-sm font-medium">{{ item.title }}</h3>
          <p class="text-xs">{{ item.price }}</p>
        </div>
      </a>
    </div>

    <!-- 右滑动按钮 -->
    <button
      @click="scroll('right')"
      class="absolute right-0 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full shadow-lg z-10"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
      </svg>
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 示例数据
const products = ref([
  {
    title: '商品1',
    price: '¥299',
    image: '/images/product1.jpg',
    link: '/product/1',
  },
  {
    title: '商品2',
    price: '¥399',
    image: '/images/product2.jpg',
    link: '/product/2',
  },
  {
    title: '商品3',
    price: '¥499',
    image: '/images/product3.jpg',
    link: '/product/3',
  },
  {
    title: '商品4',
    price: '¥599',
    image: '/images/product4.jpg',
    link: '/product/4',
  },
])

const container = ref(null)

// 滑动函数
const scroll = (direction) => {
  if (!container.value) return

  const scrollAmount = container.value.clientWidth
  container.value.scrollBy({
    left: direction === 'left' ? -scrollAmount : scrollAmount,
    behavior: 'smooth',
  })
}
</script>
